<style>

</style>
<template>
    <div class="text-center margin">
        <ul class="pagination" v-if="totalPage>1" id="i_page">
            <li v-if="pageNo != 1&&totalPage > 1" v-on:click="prevPage('pageNo','render')"><a href="javascript:void(0)">&laquo;</a></li>
            <li v-if="(pageNo - 4) > 0" v-on:click="prev10Page('pageNo','render')"><a href="javascript:void(0)">...</a></li>
            <li  v-for="(index,p) in pages" v-if="totalPage != 1&&index > (pageNo - 5)&&index < (pageNo + 5)" v-bind:class="{'active':(p-1) == pageNo}" v-on:click="getPage('pageNo','render')"><a href="javascript:void(0)">{{p}}</a></li>
            <li v-if="(totalPage - pageNo - 4) > 0" v-on:click="next10Page('pageNo','totalPage','render')"><a href="javascript:void(0)">...</a></li>
            <li v-if="pageNo != totalPage && totalPage > 1" v-on:click="nextPage('pageNo','render')"><a href="javascript:void(0)">&raquo;</a></li>
            <li><span class="page-search">跳转<input type="number" v-on:keydown="pageSearch('pageNo','totalPage','render')" >页</span></li>
            <li><span class="page-total">总共{{totalPage}}页</span></li>
        </ul>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
            }
        },
        props: ['pageNo','pages','pageSize','totalPage','paths','list','param'],
        methods: {
            render: function(){
                var params = this.param;
                params.pageNumber = (this.pageNo - 1);
                params.pageSize = VIE.pageSize;
                VIE.getJ(HTTP_SERVER+this.paths,params,this,this.success,this.error);
            },
            success: function(data) {
                var _this = this;
                _this.list = data.content;
                _this.pageNo = data.number + 1;
                _this.pageSize = data.size;
                _this.totalPage = data.totalPages;
                _this.pages = [];
                for(var i = 1; i <= _this.totalPage; i++ ){
                    _this.pages[i-1] = i;
                }
            },
            error: function(xhr, type){
                if (xhr.status === 401) {
                    //  window.location = "login.html"
                }
            },
            nextPage:function(pageNo,fun){
                this[pageNo] += 1;
                this[fun]();
            },
            prevPage:function(pageNo,fun){
                this[pageNo] -= 1;
                this[fun]();
            },
            next10Page:function(pageNo,totalPage,fun){
                this[pageNo] += 10;
                if(this[pageNo] > this[totalPage]){
                    this[pageNo] = this[totalPage];
                }
                this[fun]();
            },
            prev10Page:function(pageNo,fun){
                this[pageNo] -= 10;
                if(this[pageNo] < 1){
                    this[pageNo] = 0;
                }
                this[fun]();
            },
            pageSearch:function(pageNo,totalPage,fun){
                if(event.keyCode == 13) {
                    this[pageNo] = parseInt($(event.target).val());
                    if(this[pageNo] > this[totalPage]){
                        this[pageNo] = this[totalPage];
                    }
                    this[fun]();
                }
            },
            getPage:function(pageNo,fun){
                this[pageNo] = parseInt($(event.target).text());
                this[fun]();
            },
        },
        ready: function() {
            console.log(this.totalPage);
        }
    };

</script>